<template>
  <div>
    <h1>折线图</h1>
    <div>
      <el-checkbox v-model="smooth" @change="refresh">曲线光滑</el-checkbox>
      <el-checkbox v-model="stack" @change="refresh">区域填充</el-checkbox>
    </div>
    <common-echarts :option="option" ref="echarts"></common-echarts>
  </div>
</template>

<script>
import CommonEcharts from "./echarts.vue";

export default {
  name: "LineEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      const { smooth, stack } = this;

      let series = [
        {
          name: "销量",
          type: "line",
          data: [25, 220, 236, 210, 210, 220],
          smooth,
        },
        {
          name: "库存",
          type: "line",
          data: [15, 120, 136, 110, 110, 120],
          smooth,
        },
      ];

      if (stack) {
        series = series.map((item) => {
          return Object.assign(
            {
              stack: "总量",
              areaStyle: {},
            },
            item
          );
        });
      } else {
        series.push({
          name: "其它",
          type: "line",
          data: [35, 320, 336, 310, 310, 320],
          smooth,
        });
      }

      return {
        title: {
          text: "折线图",
        },
        xAxis: {
          type: "category",
          data: [1, 2, 3, 4, 5, 6],
        },
        yAxis: {
          type: "value",
        },
        series: series,
      };
    },
  },
  data() {
    return {
      smooth: false,
      // 指定图表的配置项和数据
      stack: false,
    };
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
